<template>
    <div>
        <el-form ref="form" v-model="artical" label-width="80px">
            <el-form-item label="文章标题">
                <el-input v-model="artical.title"></el-input>
            </el-form-item>
            <el-form-item label="文章内容">
                <el-input v-model="artical.content"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click.prevent="editSaveArtical">保存</el-button>
                <el-button @click="cancelArtical">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "editArtical",
        data(){
            return{
                artical:{
                    title:'',
                    content:''
                }
            }
        },
        created(){
            this.getArtical();
        },
        methods:{
            editSaveArtical(){
                axios.post(`http://localhost:3000/api/artical/${this.$route.params.id}`,this.artical).then(res=>{
                    this.$message({
                        message: '文章修改成功',
                        type: 'success'
                    });
                    this.getArtical();
                    this.$router.push('/list');
                });

            },
            //取消后返回列表页
            cancelArtical(){
                this.$router.back();
            },
            //获取修改前数据
            getArtical(){
                axios.get(`http://localhost:3000/api/artical/${this.$route.params.id}`).then(res=>{
                    let datas=res.data.message;
                    this.artical=datas[0];
                })
            }
        }
    }
</script>

<style scoped>

</style>